<template>
  <div>
    <el-upload
      ref="uploader"
      :headers="headers"
      :multiple="multiple"
      :file-list="fileList"
      :limit="limit"
      :on-exceed="overLimit"
      :auto-upload="true"
      :with-credentials="true"
      :before-upload="checkFile"
      :on-success="uploadSuccess"
      :action="uploadUrl"
      :disabled="disabled"
      :on-remove="removeSuccess"
      :before-remove="removeBefore"
      :on-preview="showPictureCardPreview"
      :accept="accept[type]"
      :list-type="type===0?'picture-card':'text'">
      <i v-if="type===0" slot="default" class="el-icon-plus"/>
      <el-button v-else size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :append-to-body="true">
      <div class="text-center">
        <img :src="dialogImageUrl" :fit="'fill'" class="uploadImg">
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .uploadImg{width:100%;height:100%;}
</style>
<script>
import { Alert } from '@/utils/notify'

import { getToken } from '@/utils/auth'
export default {
  name: 'Uploader',
  props: {
    size: { type: Number, default: 2 },
    limit: { type: Number, default: 1 },
    type: { type: Number, default: 0 },
    multiple: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
    fileList: { type: Array, default: () => [] }
  },
  data() {
    return {
      uploadUrl: process.env.HOST + '/manage/file/upload.do',
      dialogImageUrl: '', headers: { token: getToken() }, currentIndex: -1,
      dialogVisible: false, accept: ['.jpg,.jpeg,.png,.gif', '.mp3,.wma,.wav,.amr', '.mp4']
    }
  },
  watch: {
    fileList: function(newVal, oldVal, $event) {
      const card = this.$el.querySelector('.el-upload--picture-card')
      if (card) {
        if (newVal.length === this.limit) {
          card.style.display = 'none'
        } else if (newVal.length < this.limit) {
          card.style.display = 'block'
        }
      }
    }
  },
  mounted() {
    const length = this.fileList.length
    const card = this.$el.querySelector('.el-upload--picture-card')
    if (card) {
      if (length === this.limit) {
        card.style.display = 'none'
      } else if (length < this.limit) {
        card.style.display = 'block'
      }
    }
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      if (response.errno === 200) {
        // 发送上传成功的文件信息
        response.data.originName = file.name
        this.$emit('success', response.data)
        Alert.success(this, '上传成功')
        this.$emit('update:fileList', fileList)
      } else {
        Alert.error(this, response.errmsg)
      }
    },
    removeBefore(file, fileList) {
      this.currentIndex = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid
      })
      return true
    },
    removeSuccess(file, fileList) {
      this.$emit('update:fileList', fileList)
      // 发送删除的文件索引编号
      this.$emit('remove', this.currentIndex)
    },
    overLimit() {
      Alert.warn(this, '当前只允许上传' + this.limit + '个文件!')
    },
    showPictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    checkFile(file) {
      const name = file.name
      const suffix = name.substring(name.lastIndexOf('.'))
      const acceptTypes = this.accept[this.type].split(',')
      if (!acceptTypes.includes(suffix, 0)) {
        Alert.warn(this, '上传格式不正确!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < this.size
      if (!isLt2M) {
        Alert.warn(this, '上传文件最大2M')
        return false
      }
      return true
    }
  }
}
</script>
